﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <meta name="keywords" content="jQuery, switch button, Radio Button, RadioButton, CheckInput, RadioInput, Button" />
    <meta name="description" content="This page represents the help documentation of the jqxSwitchButton and jqxRadioButton widgets." />
    <title>jqxSwitchButton and jqxRadioButton API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
   
<div id="properties">
                                                                        <h2 style="text-align: left;" class="documentation-top-header">
                                                                            Properties</h2>
                                                                        <table class="documentation-table">
                                                                            <tr>
                                                                                <th>
                                                                                    Name
                                                                                </th>
                                                                                <th>
                                                                                    Type
                                                                                </th>
                                                                                <th>
                                                                                    Default
                                                                                </th>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span21'>width</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Number/String</span>
                                                                                </td>
                                                                                <td>
                                                                                    null
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the width.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>width</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({width:"200px"});</code></pre>
                                                                                        <p>
                                                                                                  Get the <code>width</code> property.
                                                                                        </p>
                                                                                      <pre><code>var width = $('#jqxSwitchButton').jqxSwitchButton('width');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span6'>height</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Number/String</span>
                                                                                </td>
                                                                                <td>
                                                                                    null
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the height.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>height</code> property .
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({height:"400px"});</code></pre>
                                                                                        <p>
                                                                                                  Get the <code>height</code> property.
                                                                                        </p>
                                                                                      <pre><code>var height = $('#jqxSwitchButton').jqxSwitchButton('height');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span7'>disabled</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Boolean</span>
                                                                                </td>
                                                                                <td>
                                                                                    false
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets whether the switch button is disabled.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>disabled</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ disabled:true }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>disabled</code> property.
                                                                                        </p>
                                                                                      <pre><code>var disabled = $('#jqxSwitchButton').jqxSwitchButton('disabled');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span8'>orientation</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>String</span>
                                                                                </td>
                                                                                <td>
                                                                                    'horizontal'
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Determines the jqxSwitchButton's orientation.</p> 
                                                                                         <b>Possible Values:</b>
                                                                                                    <br />
                                                                                           <pre><code>'horizontal' </code></pre>
                                                                                          <pre><code>'vertical'</code></pre>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>orientation</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ orientation:vertical }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>orientation</code> property.
                                                                                        </p>
                                                                                      <pre><code>var orientation = $('#jqxSwitchButton').jqxSwitchButton('orientation');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span9'>onLabel</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>String</span>
                                                                                </td>
                                                                                <td>
                                                                                    'On'
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the string displayed when the button is checked.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>onLabel</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ onLabel:'ON' }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>onLabel</code> property.
                                                                                        </p>
                                                                                      <pre><code>var onLabel = $('#jqxSwitchButton').jqxSwitchButton('onLabel');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span10'>offLabel</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>String</span>
                                                                                </td>
                                                                                <td>
                                                                                    'Off'
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the string displayed when the button is unchecked.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>offLabel</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ offLabel:'OFF' }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>offLabel</code> property.
                                                                                        </p>
                                                                                      <pre><code>var offLabel = $('#jqxSwitchButton').jqxSwitchButton('offLabel');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span11'>thumbSize</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>String</span>
                                                                                </td>
                                                                                <td>
                                                                                    '40%'
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the size of the thumb in percentages.</p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>thumbSize</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ thumbSize:'50%' }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>thumbSize</code> property.
                                                                                        </p>
                                                                                      <pre><code>var thumbSize = $('#jqxSwitchButton').jqxSwitchButton('thumbSize');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span12'>checked</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Boolean</span>
                                                                                </td>
                                                                                <td>
                                                                                    false
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Sets or gets the check state. </p>
                                                                                       
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Set the <code>checked</code> property.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton({ checked:true }); </code></pre>
                                                                                        <p>
                                                                                                  Get the <code>checked</code> property.
                                                                                        </p>
                                                                                      <pre><code>var checked = $('#jqxSwitchButton').jqxSwitchButton('checked');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <h2 class="documentation-top-header">
                                                                                        Events</h2>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span13'>checked</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Event</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            This event is triggered when the switch button is checked.
                                                                                        </p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Bind to the <code>checked</code> event by type: jqxSwitchButton.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').bind('checked', function (event) { // Some code here.}); </code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span14'>unchecked</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Event</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            This event is triggered when the switch button is unchecked.
                                                                                        </p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Bind to the <code>unchecked</code> event by type: jqxSwitchButton.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').bind('unchecked', function (event) { // Some code here.}); </code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span15'>change</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Event</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            This event is triggered when the switch button's state changes from one state to another.
                                                                                        </p>
                                                                                        <h4>
                                                                                            Code examples</h4>
                                                                                        <p>
                                                                                            Bind to the <code>change</code> event by type: jqxSwitchButton.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').bind('change', function (event) { // Some code here.}); </code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <h2 class="documentation-top-header">
                                                                                        Methods</h2>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span16'>check</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Method</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Checks the button.</p>
                                                                                        <h4>
                                                                                            Code example</h4>
                                                                                        <p>
                                                                                            Invoke the <code>check</code> method.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton('check');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span17'>uncheck</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Method</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Unchecks the button.</p>
                                                                                        <h4>
                                                                                            Code example</h4>
                                                                                        <p>
                                                                                            Invoke the <code>uncheck</code> method.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton('uncheck');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span18'>toggle</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Method</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Toggles the check state. This method is automatically called when the user clicks
                                                                                            the switch button.</p>
                                                                                        <h4>
                                                                                            Code example</h4>
                                                                                        <p>
                                                                                            Invoke the <code>toggle</code> method.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton('toggle');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span19'>disable</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Method</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Disables the switch button.</p>
                                                                                        <h4>
                                                                                            Code example</h4>
                                                                                        <p>
                                                                                            Invoke the <code>disable</code> method.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton('disable');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td class="documentation-option-type-click">
                                                                                    <span id='Span20'>enable</span>
                                                                                </td>
                                                                                <td>
                                                                                    <span>Method</span>
                                                                                </td>
                                                                                <td>
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td colspan='3' style='width: 100%'>
                                                                                    <div class="documentation-option-description property-content" style="display: none;">
                                                                                        <p>
                                                                                            Enables the switch button.</p>
                                                                                        <h4>
                                                                                            Code example</h4>
                                                                                        <p>
                                                                                            Invoke the <code>enable</code> method.
                                                                                        </p>
                                                                                        <pre><code>$('#jqxSwitchButton').jqxSwitchButton('enable');</code></pre>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                              <tr>
                                                                                 <td class="documentation-option-type-click">
                                                                                        <span id='Span59'>val</span>
                                                                                    </td>
                                                                                    <td>
                                                                                        <span>Method</span>
                                                                                    </td>
                                                                                    <td>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td colspan='3' style='width: 100%'>
                                                                                        <div class="documentation-option-description property-content" style="display: none;">
                                                                                            <p>
                                                                                                Sets or gets the value.
                                                                                            </p>
                                                                                            <h4>
                                                                                                Code example</h4>
                                                                                            <p>
                                                                                                Invoke the <code>val</code> method.
                                                                                            </p>
                                                                                            // Get the value.
                                                                                            <pre><code>var value = $("#jqxSwitchButton").jqxSwitchButton('val');</code></pre>                       
                                                                                            // Get the value using jQuery's val()
                                                                                            <pre><code>var value = $("#jqxSwitchButton").val();</code></pre>                       
                                                                                            // Set value.
                                                                                             <pre><code>$("#jqxSwitchButton").jqxSwitchButton('val', true);</code></pre>                       
                                                                                            // Set value using jQuery's val().
                                                                                             <pre><code>$("#jqxSwitchButton").val(true);</code></pre>                                              
                                                                                        </div>
                                                                                    </td>
                                                                                </tr>
        </table>
        <br />
    </div>
</body>
</html>
